<html>
<head>
<style>
@page {
  margin: 0;
  size: 400px 400px;
}
body {
  max-width: 400px;
  margin: 0;
  padding: 0;
}
</style>
</head>
<body>
  <div style="width: 20%; float: left; background-color: orange; height: 100px;"></div>
  <div style="width: 20%; float: right; background-color: blue; height: 110px;"></div>

  <div style="clear: both;"></div>
  
  <!-- This block should be below both the orange and blue blocks. -->  
  <div style="width: 40%; background-color: pink; height: 120px;"></div>

  <!-- So should these blocks. -->
  <div style="width: 50px; height: 50px; background-color: red; float: left;"></div>
  <div style="width: 50px; height: 50px; background-color: purple; float: right;"></div>
</body>
</html>
